<template>
  <div style="width: 310px; ">
    <div class="tabs">
      <template v-for="(item, index) in tabArr" :key="item.tabIndex">
        <div :class="item.classTabTitle" :tabName="item.tabName" @click="tabChangeHandle({
          tabIndex: item.tabIndex,
          tabName: item.tabName
        })">
          <div class="tabTitle">{{ item.tabTitle }}</div>
          <div :class="'tabInfo ' + item.classTabInfoColor">{{ item.tabInfo }}</div>
        </div>

      </template>
    </div>

  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue'
import eventBus from '../utils/eventBus'

const currentTabIndex = ref(0)

const tabArr = ref([
  {
    tabIndex: 0,
    currentTabIndex: 0,
    tabName: 'pending',
    tabTitle: '待处理',
    tabInfo: '100',
    tabContent: '001',
    classTabInfoColor: 'tabInfoColor1',
    classTabTitle: {
      tab: true,
      active: true
    }
  },
  {
    tabIndex: 1,
    currentTabIndex: 0,
    tabName: 'processing',
    tabTitle: '处理中',
    tabInfo: '200',
    tabContent: '002',
    classTabInfoColor: 'tabInfoColor2',
    classTabTitle: {
      tab: true,
      active: false
    }
  },
  {
    tabIndex: 2,
    currentTabIndex: 0,
    tabName: 'resolved',
    tabTitle: '已解决',
    tabInfo: '300',
    tabContent: '003',
    classTabInfoColor: 'tabInfoColor3',
    classTabTitle: {
      tab: true,
      active: false
    }
  }
])


function tabChangeHandle(tabObj) {
  tabArr.value.forEach(item => {
    item.classTabTitle.active = false
    currentTabIndex.value = tabObj.tabIndex

    if (item.tabIndex === tabObj.tabIndex) {
      item.classTabTitle.active = true
    }
  })

  eventBus.emit('coalState', tabObj.tabName)
}



</script>

<style scoped lang="scss">
.tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;

  .tab {
    width: 96px;
    height: 48px;
    background-color: #1f232c;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .tabTitle {
      font-size: 12px;
      color: #ffffff;
    }

    .tabInfo {
      font-size: 16px;
    }
  }

  .active {
    background-color: #7b7b7b;
  }
}

.tabContent {
  width: 310px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: pink;
}

.tabInfoColor1 {
  color: rgba(238, 120, 77, 1);
}

.tabInfoColor2 {
  color: rgba(18, 208, 161, 1);
}

.tabInfoColor3 {
  color: rgba(187, 192, 201, 1);
}
</style>
